<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DataForm</title>
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/logger/assets/logger.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/tabview.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/tabview/assets/border_tabs.css">
		<link rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">

<style type="text/css">
    /* custom css*/
    body {font-family:arial}
	
    /* CSS FOR DataTable */	
    #elDataTable {margin:1em;}
    #elDataTable table {border-collapse:collapse;}
    #elDataTable th, #elDataTable td {border:1px solid #000;padding:.25em;}
    #elDataTable th {background-color:#BEDAFF}
    #elDataTable.yui-dt-odd {background-color:#eee;} /*light gray*/
    #elDataTable em {font-style:italic;}
    #elDataTable strong {font-weight:bold;}
    #elDataTable .big {font-size:136%;}
    #elDataTable .small {font-size:77%}
    #elDataTable .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
    #elDataTable .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
  </style>
  
  </head>
  <body>

    <p>
      Welcome to the DataForm test page.
    </p>

    <ul>
      <li>
        A DataForm edits a single record at a time in a vertical form, as opposed to a tabular format.
        It is a custom Yazaar widget designed to complement the YUI DataTable.
        A DataForm can share a DataSource and ColumnSet with a DataTable, so that the two widgets can be used in tandem.
      </li>
      <li>
        A FLEV widget is being designed which uses a DataForm, DataTable, and TabView to create a unified Find, List, Edit, View workflow.
      </li>
      <li>
        This example utilizes the test data from the <a href="test-datatable.html"> DataTable</a> documentation.
      </li>
    </ul>

    <hr />

    <table cellspacing="16">
      <tr><td valign="top">
        <div id="elDataForm"></div>
        <div id="elDataTable"></div>
      </td><td>
        <div id="elLogReader"></div>
      </td></tr>
    </table>

  </body>

<!-- Patch for IE setAttribute issue [http://delete.me.uk/2004/09/ieproto.html] -->
<!--[if IE]>  
    <script type="text/javascript" src="../../build/extras/ieproto/attributes.js"></script>
    <style type="text/css">
        * { behavior: url(../../build/extras/ieproto/attributes.htc); }
    </style>
<![endif]-->  

<script src="http://www.json.org/json.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/element/element-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/logger/logger-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/tabview/tabview-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/datatable/datatable-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.2.2/build/autocomplete/autocomplete-min.js"></script>
<script src="../../build/extras/jc21/validate-min.js"></script>
<script src="../../build/dataform/dataform-debug-beta.js"></script>

<!-- tutorial -->
<script src="tutorial-data.js"></script>
<script type="text/javascript">
var oDataTable = new YAHOO.widget.DataTable("elDataTable", oColumnSet, oDataSource, {rowSingleSelect: true});
</script>
<script src="tutorial.js"></script>

<script type="text/javascript">
// populate form
var onRecordSelectEvent = function () {
  oDataForm.populateForm();
  oDataForm.isActive = true;
}
oDataTable.subscribe("recordSelectEvent", onRecordSelectEvent);
</script>

</html>
